<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            position: relative;
            margin:  0 auto;
            border-radius: 50%;
        }
        #center{
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: black;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        #ball{
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 100px;
            background-color: chartreuse;
            left: 0px;
            top: -200px;
            /* transform: translate(-50%,-50%); */
        }
    </style>
</head>
<body>
    <input type="button" value="走起" id="btnGo">
    <div id="container">
        
        <div id="center"><div id="ball"></div></div>
    </div>
    <script>
        let btnGo = document.getElementById('btnGo')
        let ball =document.getElementById('ball')
        btnGo.onclick=function(){
            let degree=0
            let baseLeft=0
            let baseTop=-200
            let r = 200 
            // let deg=0
            // ball.style.transformOrigin='bottom'
            setInterval(() => {
               //逻辑
               //1.运算
              
                // deg+=5
                degree=(degree+5)%360
                let hu =degree*Math.PI/180
                let left1 =baseLeft+r*Math.sin(hu)                //开始的left+半径*sin(度数)
                let top1 =-r*Math.cos(hu)
                console.log(hu,left1,top1);
                // ball.style.transform='rotate('+deg+'deg)'
                
                // 2.边界判断
                // ball.style.top=-300+'px'
                // 3.外观
                ball.style.left=left1+"px"
                ball.style.top=top1+'px'
            }, 2000);
        }
    </script>
</body>
</html>